<template>
  <div class="datastatistics">
    <!-- 条件 -->
    <el-card class="top_nav" :body-style="{ paddingBottom: '3px' }" :shadow="shadowShow">
      <el-form :inline="true" size="small">
        <el-form-item :label="$t('data.data1')">
          <el-date-picker v-model="dateTime" :picker-options="pickerOptions" type="daterange" range-separator="~"
            value-format="yyyy-MM-dd" :start-placeholder="$t('data.data2')" :end-placeholder="$t('data.data3')"
            popper-class="data-statistics-date-picker" />
        </el-form-item>
        <el-form-item :label="$t('data.data4')">
          <el-select @change="cateChange" v-model="form.cate" style="width: 320px" multiple allow-create
            default-first-option :placeholder="$t('caseorder.anli2')" @remove-tag="onCateSelectRemoveTag">
            <el-option v-for="item in cateOptions" :key="item.value" :label="item.label" :value="item.value"
              :class="item.class" />

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :size="optionButtonSize" @click="getSelectPageList">
            {{ $t('data.data5') }}
          </el-button>
          <el-button plain :size="optionButtonSize" @click="resetClick">{{ $t('data.data6') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 诊所 -->
    <div v-if="organizedType == 1">
      <!-- 所有者 和 管理员一样 -->
      <!-- v-if="(user_owner == 1 || (user_owner != 1 && user_organizedRoleId == 2))" -->
      <div>
        <!-- 订单总览 -->
        <el-card class="data_order order_info" :shadow="shadowShow" style="height: 357px">
          <div class="data_order_title">
            <el-row>
              <el-col :span="8" style="display: flex">
                <span class="datastatistics-title">{{ $t('data.data31') }}</span>
              </el-col>
              <el-col :span="8" style="display: flex">
                <!-- <span>订单类型分布</span> -->
                <span class="datastatistics-title">{{ $t('data.data32') }}</span>
              </el-col>
              <el-col :span="8" style="display: flex">
                <!-- <span>订单类型分布</span> -->
                <span class="datastatistics-title">{{ $t('data.data33') }}</span>
              </el-col>
            </el-row>
          </div>

          <!-- 订单总览 -->
          <el-row :gutter="20">
            <el-col :span="8" class="data_order_bottom">
              <el-row>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data8') }}</p>
                    <p>{{ statByStatusObj.up[0] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data11') }}</p>
                    <p>{{ statByStatusObj.up[1] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('add.add16') }}</p>
                    <p>{{ statByStatusObj.up[2] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data13') }}</p>
                    <p>{{ statByStatusObj.up[3] || 0 }}</p>

                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data14') }}</p>
                    <p>{{ statByStatusObj.up[4] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('add.add145') }}</p>
                    <p>{{ statByStatusObj.up[5] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data15') }}</p>
                    <p>{{ statByStatusObj.up[6] || 0 }}</p>

                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data16') }}</p>
                    <p>{{ statByStatusObj.up[7] || 0 }}</p>

                  </div>
                </el-col>
              </el-row>
            </el-col>
            <!-- 订单类型分布 -->
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div v-if="statByTypeArr.length > 0" class="distributionBox">
                  <div v-if="this.statByTypeArr.length > 0" id="myChart1" key="myChart1"
                    style="width: 100%; height: 290px">
                  </div>
                  <div class="legendBox" style="width: 40%">
                    <div class="legend-item" v-for="(item, index) in statByTypeArr" :key="index">
                      <div>
                        <span class="legend-round" :style="{ background: item.itemStyle.color }"></span>
                        <span :style="{ color: item.itemStyle.color }">{{ item.name }}</span>
                      </div>
                      <div>
                        <span class="legend-value">{{ item.value }}</span>
                        <span class="legend-proportion">/{{ item.proportion }}%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="statByTypeArr.length == 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                  <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                  <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div v-if="chartsArr.length > 0" class="patientAge" style="width: 100%; ">
                <div v-if="chartsArr.length > 0" id="myChart6" key="myChart6" style="width: 100%; height: 290px"></div>
                <div class="legendBox" style="width: 40%">
                  <div class="legend-item" v-for="(item, index) in chartsArr" :key="index">
                    <div>
                      <span class="legend-round" :style="{ background: color2[index] }"></span>
                      <span :style="{ color: color1[index] }">{{ item.name }}</span>
                    </div>
                    <div>
                      <span class="legend-value">{{ item.value }}</span>
                      <span class="legend-proportion">/{{ item.proportion }}%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="chartsArr.length <= 0" style="
                  width: 100%;
                  height: 290px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                ">
                <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 订单分析 -->
        <el-row :gutter="24" style="margin-bottom: 18px" class="order_mid order_info">
          <el-col :span="24">
            <el-card>
              <div class="data_order_title" style="display:flex;justify-content: space-between;">
                <span class="datastatistics-title">{{ $t('data.data30') }}</span>
                <div v-if="fenshix.length > 0" class="hour_order_info">
                  <TabTypeChange @getIndex="(index) => getIndex(index, 'orderAnalysis')" />
                </div>
              </div>
              <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-button size="small" v-if="(user_owner == 1 || (user_owner != 1 && user_organizedRoleId == 2))"
                    :type="orderAnalyType == 0 ? 'primary' : ''" round @click="columnar(0, 'orderAnalysis')">{{
                      $t('add.add1') }}
                  </el-button>
                  <el-button size="small" v-if="(user_owner == 1 || (user_owner != 1 && user_organizedRoleId == 2))"
                    :type="orderAnalyType == 1 ? 'primary' : ''" round @click="columnar(1, 'orderAnalysis')">{{
                      $t('data.data22') }}
                  </el-button>
                  <el-button size="small" :type="orderAnalyType == 2 ? 'primary' : ''" round
                    @click="columnar(2, 'orderAnalysis')">{{
                      $t('data.data18') }}
                  </el-button>
                  <el-button size="small" :type="orderAnalyType == 3 ? 'primary' : ''" round
                    @click="columnar(3, 'orderAnalysis')">{{
                      $t('data.data27') }}
                  </el-button>
                </el-col>
              </el-row>
              <el-row>
                <div v-if="childrenIndex2 === 0">

                  <div>
                    <div v-if="placeTypey.length > 0 && orderAnalyType == 0" id="myChart7" key="myChart7"
                      style="width: 100%; height: 350px;">
                    </div>
                    <div v-if="placeTypey.length == 0 && orderAnalyType == 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                      <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                      <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                    </div>
                  </div>

                  <div>
                    <div v-if="yishenx.length > 0 && orderAnalyType == 1" id="myChart5" key="myChart5"
                      style="width: 100%; height: 440px">

                    </div>
                    <div v-if="yishenx.length == 0 && orderAnalyType == 1" style="
                        width: 100%;
                        height: 290px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      ">
                      <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                      <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                    </div>

                  </div>

                  <div>
                    <div v-if="qushiArr.length > 0 && orderAnalyType == 2" id="myChart2" key="myChart2"
                      style="width: 100%; height: 290px;">
                    </div>
                    <div v-else-if="qushiArr.length === 0 && orderAnalyType == 2" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                      <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                      <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                    </div>
                  </div>
                  <div v-if="orderAnalyType == 3" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                    <img style="width: 250px; height: 155px;" src="@/assets/img/home/zanwushuju.png" />
                    <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                  </div>
                </div>
                <div v-if="childrenIndex2 === 1">
                  <el-table v-if="orderAnalyType == 0" height="400" :data="tableData7" style="width: 100%"
                    :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                    <el-table-column :label="activeName4 == 'first' ? $t('data.data28') : $t('data.data25')"
                      align="right" width="150">
                      <el-table-column prop="name" :label="$t('data.data24')" width="120" align="center"
                        header-align="left" />
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableHeader7" :key="index" align="center"
                      :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                  </el-table>

                  <el-table v-if="orderAnalyType == 1" height="400" :data="tableData5" style="width: 100%"
                    :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                    <el-table-column :label="activeName4 == 'first' ? $t('data.data26') : $t('data.data25')"
                      align="right" width="150">
                      <el-table-column prop="doctor" :label="$t('data.data24')" width="120" align="center"
                        header-align="left" />
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableHeader5" :key="index" align="center"
                      :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                  </el-table>

                  <el-table v-if="orderAnalyType == 2" height="400" :data="tableData2" style="width: 100%"
                    :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                    <el-table-column :label="$t('data.data20')" align="right" width="150">
                      <el-table-column :label="$t('data.data19')" prop="date" width="120" align="center"
                        header-align="left" />
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableHeader2" :key="index" align="center"
                      :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                  </el-table>

                  <div v-if="orderAnalyType == 3" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                    <img style="width: 250px; height: 155px;" src="@/assets/img/home/zanwushuju.png" />
                    <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                  </div>
                </div>
              </el-row>

            </el-card>
          </el-col>
        </el-row>
        <!-- 合作伙伴 -->
        <el-row :gutter="24" style="margin-bottom: 18px" class="order_mid order_info">
          <el-col :span="24">
            <el-card>
              <div class="data_order_title" style="display:flex;justify-content: space-between;">
                <span class="datastatistics-title">{{ $t('add.add2') }}</span>
                <div v-if="fenshix.length > 0" class="hour_order_info">
                  <TabTypeChange @getIndex="(index) => getIndex(index, 'partners')" />
                </div>
              </div>
              <el-row style="margin-bottom: 20px;">
                <el-button size="small" :type="partnersType == 0 ? 'primary' : ''" round
                  @click="columnar(0, 'partners')">{{
                    $t('data.data25') }}
                </el-button>
              </el-row>
              <el-row>
                <div v-if="partnersIndex === 0">
                  <div v-if="partnersType == 0 && unitTypey.length > 0" id="myChart10" key="myChart10"
                    style="width: 100%; height: 440px"></div>
                  <div v-if="partnersType == 0 && unitTypey.length <= 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                    <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                    <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                  </div>
                </div>
                <div v-if="partnersIndex === 1">

                  <el-table v-if="partnersType == 0" height="400" :data="tableData8" style="width: 100%"
                    :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                    <el-table-column :label="$t('data.data28')" align="right" width="150">
                      <el-table-column prop="name" :label="$t('data.data25')" width="120" align="center"
                        header-align="left" />
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableHeader8" :key="index" align="center"
                      :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                  </el-table>
                </div>
              </el-row>



            </el-card>
          </el-col>
        </el-row>



      </div>

    </div>
    <!-- 技工所 -->
    <div v-if="organizedType == 2">
      <!-- 所有者和管理员看到的页面一样  -->
      <div v-if="user_owner == 1 || (user_owner != 1 && user_organizedRoleId == 4)">
        <el-card class="data_order order_info" :shadow="shadowShow" style="height: 357px">
          <div class="data_order_title">
            <el-row>
              <el-col :span="16" style="display: flex">
                <span class="datastatistics-title">{{ $t('data.data7') }}</span>
              </el-col>
              <el-col :span="8" style="display: flex">
                <!-- <span>订单类型分布</span> -->
                <span class="datastatistics-title">{{ $t('data.data17') }}</span>
              </el-col>
            </el-row>
          </div>

          <!-- 订单总览 -->
          <el-row :gutter="20">
            <el-col :span="16" class="data_order_bottom">
              <el-row>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data8') }}</p>
                    <p>{{ statByStatusObj.up[0] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data11') }}</p>
                    <p>{{ statByStatusObj.up[1] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('add.add16') }}</p>
                    <p>{{ statByStatusObj.up[2] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data13') }}</p>
                    <p>{{ statByStatusObj.up[3] || 0 }}</p>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data14') }}</p>
                    <p>{{ statByStatusObj.up[4] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('add.add145') }}</p>
                    <p>{{ statByStatusObj.up[5] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data15') }}</p>
                    <p>{{ statByStatusObj.up[6] || 0 }}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="order_summary_item">
                    <p>{{ $t('data.data16') }}</p>
                    <p>{{ statByStatusObj.up[7] || 0 }}</p>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <!-- 订单类型分布 -->
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div v-if="statByTypeArr.length > 0" class="distributionBox">
                  <div v-if="statByTypeArr.length > 0" id="myChart1" key="myChart1" style="width: 100%; height: 290px">
                  </div>
                  <div class="legendBox" style="width: 40%">
                    <div class="legend-item" v-for="(item, index) in statByTypeArr" :key="index">
                      <div>
                        <span class="legend-round" :style="{ background: item.itemStyle.color }"></span>
                        <span :style="{ color: item.itemStyle.color }">{{ item.name }}</span>
                      </div>
                      <div>
                        <span class="legend-value">{{ item.value }}</span>
                        <span class="legend-proportion">/{{ item.proportion }}%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="statByTypeArr.length == 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                  <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                  <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 订单分析 -->
        <el-row :gutter="24" style="margin-bottom: 18px" class="order_mid order_info">
          <el-col :span="24">
            <el-card>
              <div class="data_order_title">
                <el-row>
                  <el-col :span="24" style="display: flex;justify-content: space-between;">
                    <span class="datastatistics-title">{{ $t('data.data30') }}</span>
                    <div v-if="fenshix.length > 0" class="hour_order_info">
                      <TabTypeChange @getIndex="(index) => getIndex(index, 'orderAnalysis')" />
                    </div>
                  </el-col>
                </el-row>


              </div>
              <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-button size="small" :type="orderAnalyType == 0 ? 'primary' : ''" round
                    @click="columnar(0, 'orderAnalysis')">{{
                      $t('data.data18') }}
                  </el-button>
                  <el-button size="small" :type="orderAnalyType == 1 ? 'primary' : ''" round
                    @click="columnar(1, 'orderAnalysis')">{{
                      $t('data.data27') }}
                  </el-button>
                </el-col>
              </el-row>
              <div v-if="orderAnalyType == 0">
                <el-row>

                  <div v-if="qushiArr.length > 0 && childrenIndex2 == 0" id="myChart2" key="myChart2"
                    style="width: 100%; height: 290px;">
                  </div>
                  <div v-else-if="qushiArr.length === 0 && childrenIndex2 == 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                    <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                    <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                  </div>
                </el-row>
                <div v-if="childrenIndex2 == 1">
                  <el-table :data="tableData2" height="400" style="width: 100%" :header-cell-style="{
                    padding: '0',
                    backgroundColor: '#e4eaee',
                    fontSize: '12px',
                    color: '#808080',
                  }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                    <el-table-column :label="$t('data.data20')" align="right" width="150">
                      <el-table-column :label="$t('data.data19')" prop="date" width="120" align="center"
                        header-align="left" />
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableHeader2" :key="index" align="center"
                      :label="item.name" :prop="item.prop" />
                  </el-table>
                </div>
              </div>
              <div v-if="orderAnalyType == 1" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 合作伙伴 -->
        <el-row :gutter="24" style="margin-bottom: 18px" class="order_mid order_info">
          <el-col :span="24">
            <el-card>
              <div class="data_order_title" style="display:flex;justify-content: space-between;">
                <span class="datastatistics-title">{{ $t('add.add181') }}</span>
                <div v-if="fenshix.length > 0" class="hour_order_info">
                  <TabTypeChange @getIndex="(index) => getIndex(index, 'partners')" />
                </div>
              </div>

              <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-button size="small" :type="partnersType == 0 ? 'primary' : ''" round
                    @click="columnar(0, 'partners')">{{
                      $t('data.data24') }}
                  </el-button>
                  <el-button size="small" :type="partnersType == 1 ? 'primary' : ''" round
                    @click="columnar(1, 'partners')">{{
                      $t('add.add75') }}
                  </el-button>
                </el-col>





              </el-row>
              <el-row>
                <div v-if="partnersIndex === 0">
                  <div v-if="partnersType === 0">
                    <div v-if="doctorTypey.length > 0" id="myChart3" key="myChart3" style="width: 100%; height: 280px">
                    </div>
                    <div v-if="doctorTypey.length <= 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                      <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                      <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                    </div>
                  </div>
                  <div v-if="partnersType === 1">
                    <div v-if="unitTypey.length > 0" id="myChart9" key="myChart9" style="width: 100%; height: 280px">
                    </div>
                    <div v-if="unitTypey.length <= 0" style="
                    width: 100%;
                    height: 290px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  ">
                      <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
                      <div style="letter-spacing: 1px; margin-top: -20px">{{ $t('add.add4') }}...</div>
                    </div>
                  </div>
                </div>
                <div v-if="partnersIndex === 1">
                  <div v-if="partnersType === 0">
                    <el-table :data="tableData9" height="400" style="width: 100%" :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                      <el-table-column :label="$t('data.data28')" align="right" width="150">
                        <el-table-column prop="name" :label="$t('data.data25')" width="120" align="center"
                          header-align="left" />
                      </el-table-column>
                      <el-table-column v-for="(item, index) in tableHeader9" :key="index" align="center"
                        :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                    </el-table>
                  </div>
                  <div v-if="partnersType === 1">
                    <el-table :data="tableData8" height="400" style="width: 100%" :header-cell-style="{
                      padding: '0',
                      backgroundColor: '#e4eaee',
                      fontSize: '12px',
                      color: '#808080',
                    }" :header-row-style="{ height: '26px' }" :row-style="{ fontSize: '12px' }">
                      <el-table-column :label="$t('data.data28')" align="right" width="150">
                        <el-table-column prop="name" :label="$t('data.data25')" width="120" align="center"
                          header-align="left" />
                      </el-table-column>
                      <el-table-column v-for="(item, index) in tableHeader8" :key="index" align="center"
                        :label="`${item.name} ${$t('data.data34')}`" :prop="item.prop" />
                    </el-table>
                  </div>
                </div>
              </el-row>
            </el-card>
          </el-col>

        </el-row>

      </div>

      <!-- 技工所普通成员 不展示 -->
      <div v-if="user_owner != 1 && user_organizedRoleId == 5"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import TabTypeChange from '@/components/tabTypeChange/index';
import { setCateTextColor } from '@/utils/slef.js';
function setPickerShortcutStyle(innerHTML) {
  const panelShortcutDom = document.querySelectorAll('.el-picker-panel__shortcut');
  panelShortcutDom.forEach((dom) => {
    if (dom.innerHTML === innerHTML) {
      dom.setAttribute('style', 'color: #003E67');
    } else {
      dom.setAttribute('style', 'color: #606266');
    }
  });
}

export default {
  // 数据统计
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Datastatistics',
  components: {
    TabTypeChange,
  },
  data() {
    return {
      color7: [],
      color1: [],
      color2: ['#f35a68', '#65b7e5', '#113c63'],
      qushiArr: [],
      hezuoArr: [],
      // shadow: "always",
      childrenIndex2: 0,     // 订单分析
      childrenIndex5: 0,     // 合作伙伴
      childrenIndex6: 0,
      orderTopActiveName: 'first',
      activeName4: 'first',
      form: {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        cate: ['1', '2', '3'], // 类型
      },
      dateTime: [],
      // 类型选择
      cateOptions: [
        { label: this.$t('caseorder.yulan.yulan7'), value: '1', class: 'cate_color1' },
        { label: this.$t('caseorder.yulan.yulan8'), value: '2', class: 'cate_color2' },
        { label: this.$t('caseorder.yulan.yulan9'), value: '3', class: 'cate_color3' },
      ],
      // 订单总览
      // type des rise equ
      orderSummary: [
        [
          {
            title: '订单总数',
            amount: 327,
            tip: '较昨日',
            type: 'des',
            people: 3,
          },
          {
            title: this.$t('data.data11'),
            amount: 327,
            tip: '较昨日',
            type: 'des',
            people: 3,
          },
          {
            title: this.$t('add.aadd16dd15'),
            amount: 327,
            tip: '较昨日',
            type: 'rise',
            people: 3,
          },
          {
            title: this.$t('add.add18'),
            amount: 327,
            tip: '较昨日',
            type: 'des',
            people: 3,
          },
        ],
        [
          {
            title: this.$t('add.add20'),
            amount: 327,
            tip: '较昨日',
            type: 'equ',
            people: 3,
          },
          {
            title: this.$t('add.add22'),
            amount: 327,
            tip: '较昨日',
            type: 'des',
            people: 3,
          },
          {
            title: this.$t('add.add128'),
            amount: 327,
            tip: '较昨日',
            type: 'des',
            people: 3,
          },
        ],
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('add.add155'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add155'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add156'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add156'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add157'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add157'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add158'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add158'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 364);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      columnarIndex: 0, // 柱状图索引
      orderAnalyType: 0, // 订单分析索引
      partnersType: 0, // 合作伙伴类型
      partnersIndex: 0, // 合作伙伴索引
      statByStatusObj: {
        up: [],
        down: [],
      }, // 订单总览
      statByTypeArr: [], // 订单类型分布
      doctorTopObj: { nums: [] }, // 医生订单
      clinicTopObj: {}, // 诊所订单
      tableData2: [],
      tableHeader2: [],
      tableData7: [],
      tableHeader7: [],
      tableData8: [],
      tableHeader8: [],
      tableData9: [],
      tableHeader9: [],
      tableData5: [],
      tableHeader5: [],

      // 技工所合作伙伴
      placeName7: [],
      placeType1: [],
      placeType2: [],
      placeType3: [],
      placeTypey: [],

      // 
      unitNames: [],
      unitType1: [],
      unitType2: [],
      unitType3: [],
      unitTypey: [],

      // 医生合作伙伴
      doctorName: [],
      doctorType1: [],
      doctorType2: [],
      doctorType3: [],
      doctorTypey: [],




      tableData3: [
        {
          date: this.$t('add.add160'),
          name: '1',
          province: '23',
          city: '3',
          zip: 200333,
        },
        {
          date: this.$t('add.add161'),
          name: '12',
          province: '21',
          city: '2',
          zip: 200333,
        },
        {
          date: this.$t('add.add159'),
          name: '23',
          province: '43',
          city: '33',
          zip: 200333,
        },
      ],
      user_organizedRoleId: '',
  
      options: [
        {
          value: 'cn',
          label: '中文',
        },
        {
          value: 'en',
          label: 'English',
        },
      ],
      doctor4x: [], // 分组数据
      doctor4y: [],
      skillDept4x: [],
      skillDept4y: [],
      fenshix: [],
      fenshiy1: [],
      fenshiy2: [],
      fenshiy3: [],
      fenshiData: [],
      chartsArr: [], // 患者年龄分布
      yishenx: [],
      yishexName: [],
      yisheny1: [],
      yisheny2: [],
      yisheny3: [],

      user_owner: null,
      organizedType: null,
      user_roleId: '',

      myChart_7: null,
    };
  },
  created() {
    const end = new Date();
    const start = new Date();
    const a = end.setTime(start.getTime());
    const b = start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);
    this.dateTime = [this.shijianc(b), this.shijianc(a)];
    this.form.endTime = this.shijianc(a);
    this.form.startTime = this.shijianc(b);

    this.getStatByStatus(this.form);
    this.getStatByType(this.form);

    this.getStatPatientByAge(this.form);
    this.getStatDoctorPatientsByAges(this.form);
    this.getfenshiduan(this.form);
 
  },
  mounted() {
    window.onresize = () => {
      // 屏幕尺寸变化
      return (() => {
        this.initCharts1();
        this.initCharts2();
        this.initCharts3();
        this.initCharts9();
        this.initCharts4();
        this.initCharts5();
        this.initCharts6();
        this.initCharts7();
        this.initCharts8();
        this.initCharts10();
      })();
    };
    // this.user_roleId = window.localStorage.getItem("user_roleId")
    this.user_organizedRoleId = window.localStorage.getItem('user_roleId');
    this.user_owner = localStorage.getItem('user_owner'); // 1为所有者
    this.organizedType = localStorage.getItem('user_organizedType'); // 1诊所 2技工所

    if (this.user_owner != 1 && this.user_organizedRoleId == 3) {
      this.columnarIndex = 1;
      this.activeName4 = 'second';
      this.orderAnalyType = 2;
    }

    this.getStatByGroup(this.form, 0);
    this.getStatByGroup(this.form, 1);
    this.getStatByGroup(this.form, 2);
    this.$nextTick(() => {
      // 设置牙齿类型的下拉文字不同样式
      setCateTextColor(this.$t('caseorder.yulan.yulan7'),this.$t('caseorder.yulan.yulan8'),this.$t('caseorder.yulan.yulan9'));
    });


  },
  methods: {
    cateChange() {

      this.$nextTick(() => {
        // 设置牙齿类型的下拉文字不同样式
        setCateTextColor(this.$t('caseorder.yulan.yulan7'),this.$t('caseorder.yulan.yulan8'),this.$t('caseorder.yulan.yulan9'));
      });
    },

    allElementsAreZero(array) {
      return array.every(function (element) {
        return element == 0;
      });
    },
    onCateSelectRemoveTag(removeTagValue) {
      if (this.form.cate.length === 0) {
        this.form.cate = [removeTagValue];
      }
    },
    // 查询
    getSelectPageList() {
      if (this.form.cate.length == 0) {
        return this.$message.error('请选择类型');
      }
      this.tableData2 = [];
      this.tableHeader2 = [];
      this.tableData7 = [];
      this.tableHeader7 = [];
      this.tableData8 = [];
      this.tableHeader8 = [];
      this.tableData5 = [];
      this.tableHeader5 = [];
      this.placeName7 = [];
      this.placeType1 = [];
      this.placeType2 = [];
      this.placeType3 = [];
      this.placeTypey = [];
      this.doctor4x = [];
      this.doctor4y = [];
      this.skillDept4x = [];
      this.skillDept4y = [];
      this.fenshix = [];
      this.fenshiy1 = [];
      this.fenshiy2 = [];
      this.fenshiy3 = [];
      this.fenshiData = [];
      // this.chartsArr = []; // 患者年龄分布
      this.yishenx = [];
      this.yishexName = [];
      this.yisheny1 = [];
      this.yisheny2 = [];
      this.yisheny3 = [];
      this.childrenIndex2 = 0;
      // this.orderAnalyType = 0;
      this.partnersIndex = 0;
      // this.partnersType = 0;


      if (this.dateTime && this.dateTime.length > 0) {
        this.form.startTime = this.dateTime[0];
        this.form.endTime = this.dateTime[1];
      } else {
        this.form.startTime = '';
        this.form.endTime = '';
      }
      this.getStatByStatus(this.form);
      this.getStatByType(this.form);


      this.getStatByGroup(this.form, 0);
      this.getStatByGroup(this.form, 1);
      this.getStatByGroup(this.form, 2);
      this.getStatPatientByAge(this.form);
      this.getStatDoctorPatientsByAges(this.form);
      this.getfenshiduan(this.form);
    },
    // 重置
    resetClick() {
      this.form = {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        cate: ['1', '2', '3'], // 类型
      };
      const end = new Date();
      const start = new Date();
      const a = end.setTime(start.getTime());
      const b = start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);
      this.dateTime = [this.shijianc(b), this.shijianc(a)];
      this.form.endTime = this.shijianc(a);
      this.form.startTime = this.shijianc(b);
      this.tableData2 = [];
      this.tableHeader2 = [];
      this.tableData7 = [];
      this.tableHeader7 = [];
      this.tableData8 = [];
      this.tableHeader8 = [];
      this.tableData5 = [];
      this.tableHeader5 = [];
      this.placeName7 = [];
      this.placeType1 = [];
      this.placeType2 = [];
      this.placeType3 = [];
      this.placeTypey = [];
      this.doctor4x = [];
      this.doctor4y = [];
      this.skillDept4x = [];
      this.skillDept4y = [];
      this.fenshix = [];
      this.fenshiy1 = [];
      this.fenshiy2 = [];
      this.fenshiy3 = [];
      this.fenshiData = [];
      // this.chartsArr = []; // 患者年龄分布
      this.yishenx = [];
      this.yishexName = [];
      this.yisheny1 = [];
      this.yisheny2 = [];
      this.yisheny3 = [];
      this.childrenIndex2 = 0;
      // this.orderAnalyType = 0;
      this.partnersIndex = 0;
      // this.partnersType = 0;
      this.getStatByStatus(this.form);
      this.getStatByType(this.form);


      this.getStatByGroup(this.form, 0);
      this.getStatByGroup(this.form, 1);
      this.getStatByGroup(this.form, 2);
      this.getStatPatientByAge(this.form);
      this.getStatDoctorPatientsByAges(this.form);
      this.getfenshiduan(this.form);
    },
    shijianc(time) {
      const date = new Date(time);
      const Y = date.getFullYear() + '-';
      const M =
        (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      return Y + M + D;
    },
    // 订单总览
    getStatByStatus(val) {
      let url = '/order/statByStatus';
      if ((val && val.startTime && val.endTime) || (val && val.cate)) {
        url = `/order/statByStatus?startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .get(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.statByStatusObj = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 订单类型分布
    getStatByType(val) {
      let url = '/order/statByType';
      if ((val && val.startTime && val.endTime) || (val && val.cate)) {
        url = `/order/statByType?startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .get(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            // ['#1f9872', '#1ab0e0', '#003e67']
            this.color1 = ['#1f9872', '#1ab0e0', '#003e67'];
            this.statByTypeArr = res.data;


            let sum = this.statByTypeArr.reduce(function (acc, obj) {
              return Number(acc) + Number(obj.value);
            }, 0);
            this.statByTypeArr.forEach((item) => {
              let proportion = sum === 0 ? 0 : (item.value / sum) * 100;
              item['proportion'] = Number.isInteger(proportion)
                ? proportion
                : proportion.toFixed(2);
              if (item.id === 1) {
                // 牙齿修复
                item['itemStyle'] = {
                  color: 'rgb(31, 152, 114)'
                };

              } else if (item.id === 2) {
                // 牙齿种植
                item['itemStyle'] = {
                  color: 'rgb(26, 176, 224)'
                };
              } else if (item.id === 3) {
                // 牙齿正畸
                item['itemStyle'] = {
                  color: 'rgb(0, 62, 103)'
                };
              }
            });


            setTimeout(() => {
              this.initCharts1();
            }, 1000);
            // this.$nextTick(() => { this.initCharts1() });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 分时段订单趋势
    getfenshiduan(val) {

      let url = '/order/statYearOrder';
      if ((val && val.startTime && val.endTime) || (val && val.cate)) {
        url = `/order/statYearOrder?startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .post(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            /***
             * 前置
             */
            let typ1Arr = res.data.echarts.map(m => m['typ1']);
            let typ2Arr = res.data.echarts.map(m => m['typ2']);
            let typ3Arr = res.data.echarts.map(m => m['typ3']);
            let bool1 = this.allElementsAreZero(typ1Arr);
            let bool2 = this.allElementsAreZero(typ2Arr);
            let bool3 = this.allElementsAreZero(typ3Arr);

            if (bool1 && bool2 && bool3) {
              res.data.echarts = [];
            }
            this.fenshix = [];
            this.fenshiy1 = [];
            this.fenshiy2 = [];
            this.fenshiy3 = [];
            this.fenshiData = [];
            this.qushiArr = [];

            res.data.echarts.forEach((item) => {
              this.fenshix.push(item.date);
              if (item.typ1 != undefined) {
                this.fenshiy1.push(item.typ1); // 牙齿修复
              }
              if (item.typ2 != undefined) {
                this.fenshiy2.push(item.typ2); // 牙齿种植
              }
              if (item.typ3 != undefined) {
                this.fenshiy3.push(item.typ3); // 牙齿正畸
              }
            });
            if (this.fenshiy1.length > 0) {
              this.fenshiData.push(this.$t('add.add159'));
              this.qushiArr.push({
                name: this.$t('add.add159'),
                type: 'line',

                itemStyle: {
                  color: '#1e9970',
                  lineStyle: {
                    // 线条颜色
                    color: '#1e9970',
                  },
                },
                data: this.fenshiy1,
              });
            }
            if (this.fenshiy2.length > 0) {
              this.fenshiData.push(this.$t('add.add160'));
              this.qushiArr.push({
                name: this.$t('add.add160'),
                type: 'line',

                itemStyle: {
                  color: '#1ab0e0',
                  lineStyle: {
                    // 线条颜色
                    color: '#1ab0e0',
                  },
                },
                data: this.fenshiy2,
              });
            }
            if (this.fenshiy3.length > 0) {
              this.fenshiData.push(this.$t('add.add161'));
              this.qushiArr.push({
                name: this.$t('add.add161'),
                type: 'line',

                itemStyle: {
                  color: '#003e67',
                  lineStyle: {
                    // 线条颜色
                    color: '#003e67',
                  },
                },
                data: this.fenshiy3,
              });
            }
            console.log('qushiArr--', this.qushiArr);
            this.tableData2 = res.data.table;
            this.tableData2.forEach((item) => {
              item['sums'] = Number(item['typ1']) + Number(item['typ2']) + Number(item['typ3']);
            });
            this.tableHeader2 = res.data.tableHeader;
            this.tableHeader2.push({
              name: this.$t('data.data35'),
              prop: 'sums'
            });
            setTimeout(() => {
              this.initCharts2();
            }, 1000);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },


    // 分组订单排行
    getStatByGroup(val, statusType) {





      console.log('----', this.placeName7);
      let url = `/order/statByGroup?queryType=${statusType}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      if (val && val.startTime && val.endTime) {
        url = `/order/statByGroup?queryType=${statusType}&startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .get(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (res.data.echarts) {
              let typ1Arr = res.data.echarts.map(m => m['type1']);
              let typ2Arr = res.data.echarts.map(m => m['type2']);
              let typ3Arr = res.data.echarts.map(m => m['type3']);
              let bool1 = this.allElementsAreZero(typ1Arr);
              let bool2 = this.allElementsAreZero(typ2Arr);
              let bool3 = this.allElementsAreZero(typ3Arr);
              if (bool1 && bool2 && bool3) {
                res.data.echarts = [];
              }
              if (statusType === 0) {
                this.placeName7 = [];
                this.placeTypey = [];
                this.placeType1 = [];
                this.placeType2 = [];
                this.placeType3 = [];
                // 医生订单类型分布
                res.data.echarts.forEach((item) => {
                  this.placeName7.push(item.doctor);
                  if (item.type1 != undefined) {
                    this.placeType1.push(item.type1);
                  }
                  if (item.type2 != undefined) {
                    this.placeType2.push(item.type2);
                  }
                  if (item.type3 != undefined) {
                    this.placeType3.push(item.type3);
                  }
                });
                this.color7 = [];
                if (this.placeType1.length > 0) {
                  this.color7.push('#1f9872');
                  this.placeTypey.push({
                    name: this.$t('add.add159'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#1d986f',
                    },
                    data: this.placeType1,
                  });
                }
                if (this.placeType2.length > 0) {
                  this.color7.push('#1ab0e0');
                  this.placeTypey.push({
                    name: this.$t('add.add160'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#003e66',
                    },
                    data: this.placeType2,
                  });
                }
                if (this.placeType3.length > 0) {
                  this.color7.push('#003e67');
                  this.placeTypey.push({
                    name: this.$t('add.add161'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#17bcef',
                    },
                    data: this.placeType3,
                  });
                }
                this.tableData7 = res.data.table;
                this.tableData7.forEach((item) => {
                  item['sums'] = Number(item['typ1']) + Number(item['typ2']) + Number(item['typ3']);
                });

                this.tableHeader7 = res.data.tableHeader;
                this.tableHeader7.push({
                  name: this.$t('data.data35'),
                  prop: 'sums'
                });
                console.log('---', this.placeTypey);

              } else if (statusType === 1) {
                this.doctorName = [];
                this.doctorType1 = [];
                this.doctorType2 = [];
                this.doctorType3 = [];
                this.doctorTypey = [];
                res.data.echarts.forEach((item) => {
                  this.doctorName.push(item.doctor);
                  if (item.type1 != undefined) {
                    this.doctorType1.push(item.type1);
                  }
                  if (item.type2 != undefined) {
                    this.doctorType2.push(item.type2);
                  }
                  if (item.type3 != undefined) {
                    this.doctorType3.push(item.type3);
                  }
                });
                if (this.doctorType1.length > 0) {
                  this.color7.push('#1f9872');
                  this.doctorTypey.push({
                    name: this.$t('add.add159'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#1d986f',
                    },
                    data: this.doctorType1,
                  });
                }
                if (this.doctorType2.length > 0) {
                  this.color7.push('#1ab0e0');
                  this.doctorTypey.push({
                    name: this.$t('add.add160'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#003e66',
                    },
                    data: this.doctorType2
                  });
                }
                if (this.doctorType3.length > 0) {
                  this.color7.push('#003e67');
                  this.doctorTypey.push({
                    name: this.$t('add.add161'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,

                    lineStyle: {
                      color: '#17bcef',
                    },
                    data: this.doctorType3,
                  });
                }
                this.tableData9 = res.data.table;
                this.tableData9.forEach((item) => {
                  item['sums'] = Number(item['typ1']) + Number(item['typ2']) + Number(item['typ3']);
                });
                this.tableHeader9 = res.data.tableHeader;
                this.tableHeader9.push({
                  name: this.$t('data.data35'),
                  prop: 'sums'
                });
              } else if (statusType === 2) {
                this.unitNames = [];
                this.unitType1 = [];
                this.unitType2 = [];
                this.unitType3 = [];
                this.unitTypey = [];
                // 诊所或者技工所
                res.data.echarts.forEach((item) => {
                  this.unitNames.push(item.doctor);
                  if (item.type1 != undefined) {
                    this.unitType1.push(item.type1);
                  }
                  if (item.type2 != undefined) {
                    this.unitType2.push(item.type2);
                  }
                  if (item.type3 != undefined) {
                    this.unitType3.push(item.type3);
                  }
                });
                this.color7 = [];
                if (this.unitType1.length > 0) {
                  this.color7.push('#1f9872');
                  this.unitTypey.push({
                    name: this.$t('add.add159'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#1d986f',
                    },
                    data: this.unitType1,
                  });
                }
                if (this.unitType2.length > 0) {
                  this.color7.push('#1ab0e0');
                  this.unitTypey.push({
                    name: this.$t('add.add160'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#003e66',
                    },
                    data: this.unitType2
                  });
                }
                if (this.unitType3.length > 0) {
                  this.color7.push('#003e67');
                  this.unitTypey.push({
                    name: this.$t('add.add161'),
                    barWidth: 30,
                    type: 'bar',

                    symbolSize: 8,
                    zlevel: 3,
                    // itemStyle: {
                    //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    //   borderRadius: [20, 20, 0, 0],
                    // },
                    lineStyle: {
                      color: '#17bcef',
                    },
                    data: this.unitType3,
                  });
                }
                this.tableData8 = res.data.table;
                this.tableData8.forEach((item) => {
                  item['sums'] = Number(item['typ1']) + Number(item['typ2']) + Number(item['typ3']);
                });
                this.tableHeader8 = res.data.tableHeader;
                this.tableHeader8.push({
                  name: this.$t('data.data35'),
                  prop: 'sums'
                });
              }

            }
            this.hezuoArr = [];
            setTimeout(() => {
              this.initCharts3();
              this.initCharts7();
              this.initCharts9();
              this.initCharts10();
            }, 1000);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 患者年龄分布
    getStatPatientByAge(val) {

      let url = '/order/statPatientByAge';
      if (val && val.startTime && val.endTime) {
        url = `/order/statPatientByAge?startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .post(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            res.data.forEach((item) => {
              item.value = item.num;
              delete item.num;
            });
            this.chartsArr = res.data;
            let sum = this.chartsArr.reduce(function (acc, obj) {
              return Number(acc) + Number(obj.value);
            }, 0);
            this.chartsArr.forEach((item) => {
              let proportion = sum === 0 ? 0 : (item.value / sum) * 100;
              item['proportion'] = Number.isInteger(proportion)
                ? proportion
                : proportion.toFixed(2);
            });
            setTimeout(() => {
              this.initCharts6();
            }, 1000);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 医生所属患者年龄段分布
    getStatDoctorPatientsByAges(val) {

      let url = '/order/statDoctorPatientsByAges';
      if (val && val.startTime && val.endTime) {
        url = `/order/statDoctorPatientsByAges?startTime=${val.startTime}&endTime=${val.endTime}&typeStr=${val.cate}&timeZone=${this.$timeZone}`;
      }
      this.$http
        .post(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.yishexName = [];
            this.yishenx = [];

            this.yisheny1 = [];
            this.yisheny2 = [];
            this.yisheny3 = [];
            res.data.echarts.forEach((item) => {
              this.yishexName.push(item.doctorName);
              if (item.typ1 != undefined) {
                this.yisheny1.push(item.typ1);
              }
              if (item.typ2 != undefined) {
                this.yisheny2.push(item.typ2);
              }
              if (item.typ3 != undefined) {
                this.yisheny3.push(item.typ3);
              }

            });

            if (this.yisheny1.length > 0) {

              this.yishenx.push({
                name: this.$t('add.add052'),
                barWidth: 30,
                type: 'bar',

                symbolSize: 8,
                zlevel: 3,
                // itemStyle: {
                //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                //   borderRadius: [20, 20, 0, 0],
                // },
                lineStyle: {
                  color: '#1d986f',
                },
                data: this.yisheny1,
              });
            }
            if (this.yisheny2.length > 0) {

              this.yishenx.push({
                name: this.$t('add.add053'),
                barWidth: 30,
                type: 'bar',

                symbolSize: 8,
                zlevel: 3,
                // itemStyle: {
                //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                //   borderRadius: [20, 20, 0, 0],
                // },
                lineStyle: {
                  color: '#003e66',
                },
                data: this.yisheny2,
              });
            }
            if (this.yisheny3.length > 0) {

              this.yishenx.push({
                name: this.$t('add.add054'),
                barWidth: 30,
                type: 'bar',

                symbolSize: 8,
                zlevel: 3,
                // itemStyle: {
                //   // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                //   borderRadius: [20, 20, 0, 0],
                // },
                lineStyle: {
                  color: '#17bcef',
                },
                data: this.yisheny3,
              });
            }

            this.tableData5 = res.data.table;
            this.tableData5.forEach((item) => {
              item['sums'] = Number(item['typ1']) + Number(item['typ2']) + Number(item['typ3']);
            });
            this.tableHeader5 = res.data.tableHeader;
            this.tableHeader5.push({
              name: this.$t('data.data35'),
              prop: 'sums'
            });

            setTimeout(() => {

              this.initCharts5();
            }, 1000);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    // 医生订单类型分布tabs

    // 初始化 饼状图
    initCharts1() {
      const myChart1 = document.getElementById('myChart1');
      if (!myChart1) return;
      const myChart_1 = echarts.init(myChart1);
      // 绘制图表
      myChart_1.setOption({
        backgroundColor: '#fff', // 背景颜色
        title: {
          text: '',
        },

        tooltip: {
          // 显示更多信息
          trigger: 'item',
        },

        series: [
          {
            type: 'pie', // 饼状图
            radius: '50%', // 半径
            // roseType: 'angle', // 玫瑰样式--南丁格尔玫瑰图，突出角度
            // 图形样式
            itemStyle: {
              // 普通样式
              shadowBlur: 10, // 阴影大小
              shadowOffsetX: 0, // 阴影水平方向的偏移
              shadowOffsetY: 0, // 阴影垂直方向的偏移
              shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
            },
            // 高亮样式
            emphasis: {
              itemStyle: {
                shadowBlur: 20, // 阴影大小
                shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
              },
            },

            // 引导线样式
            labelLine: {
              // 引导线普通样式
              lineStyle: {
                color: '#a0afde', // 引导线颜色（红绿蓝,透明度）-白色
              },
            },
            // 具体数据
            data: this.statByTypeArr,
          },
        ],
      }, true);
    },
    // 初始化 折线图
    initCharts2() {

      let that = this;
      // 基于准备好的dom，初始化echarts实例
      const myChart2 = document.getElementById('myChart2');
      if (!myChart2) return;
      // if (myChart2.hasAttribute('_echarts_instance_')) {
      //   myChart2.removeAttribute('_echarts_instance_');
      // }
      const myChart_2 = echarts.init(myChart2);
      // 绘制图表
      myChart_2.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {

            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
           <div style="width: 200px">
             <div style="display: flex;justify-content: space-between;">
                 <span>${params[0].name}</span>
                 <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
             </div>
         `;
            params.forEach((item) => {
              result += `
               <div style="display: flex;justify-content: space-between;">
                 <div>
                   <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
                   <span>${item.seriesName}</span>  
                 </div>
                 <span>${item.value}${that.$t('data.data34')}</span>
               </div>
               
             </div>
           `;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '5%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        // dataZoom: [{
        //   type: 'slider', // 设置为滑动条型式
        //   show: true, // 显示dataZoom组件
        //   start: 0, // 默认显示的起始位置为0
        //   end: 100, // 默认显示的结束位置为100
        //   handleSize: 8, // 滑动条的手柄大小
        //   handleStyle: {
        //     color: '#DCE2E8' // 滑动条的手柄颜色
        //   },
        //   xAxisIndex: [0], // 表示控制第一个x轴
        //   filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
        // }],

        legend: {
          orient: 'horizontal', // vertical垂直显示  horizontal水平显示
          top: '10',
          itemWidth: 16,
          itemHeight: 11,
          itemGap: 36, // 图例每项之间的间隔
          borderRadius: 5,
          icon: 'rect',
          textStyle: {
            fontSize: 12, // 字体大小
            color: '#666666',
            borderRadius: 20,
          },
          data: this.fenshiData,
        },
        // toolbox: { //保存图片
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false, // 隐藏y轴
          },
          axisTick: {
            show: false, // 刻度线
          },
          data: this.fenshix,

          axisLabel: {
            showMaxLabel: true // 确保显示最后一个标签  
          }
        },
        yAxis: {
          name: this.$t('add.add211'),
          type: 'value',
        },
        series: this.qushiArr,
      }, true);
    },
    // 初始化 柱状图
    initCharts3() {
      let that = this;
      const myChart3 = document.getElementById('myChart3');
      if (!myChart3) return;
      // if (myChart3.hasAttribute('_echarts_instance_')) {
      //   myChart3.removeAttribute('_echarts_instance_');
      // }
      const myChart_3 = echarts.init(myChart3);
      // 绘制图表
      myChart_3.setOption({
        color: this.color7,
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {

            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
<div style="width: 200px">
 <div style="display: flex;justify-content: space-between;">
     <span>${params[0].name}</span>
     <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
 </div>
`;
            params.forEach((item) => {
              result += `
   <div style="display: flex;justify-content: space-between;">
     <div>
       <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
       <span>${item.seriesName}</span>  
     </div>
     <span>${item.value}${that.$t('data.data34')}</span>
   </div>
   
 </div>
`;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',

            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.doctorName,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: this.doctorTypey,
      }, true);
    },
    initCharts9() {
      let that = this;
      const myChart9 = document.getElementById('myChart9');
      if (!myChart9) return;
      // if (myChart9.hasAttribute('_echarts_instance_')) {
      //   myChart9.removeAttribute('_echarts_instance_');
      // }
      const myChart_9 = echarts.init(myChart9);
      // 绘制图表
      myChart_9.setOption({
        color: this.color7,
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
            <div style="width: 200px">
            <div style="display: flex;justify-content: space-between;">
                <span>${params[0].name}</span>
                <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
            </div>
            `;
            params.forEach((item) => {
              result += `
              <div style="display: flex;justify-content: space-between;">
                <div>
                  <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
                  <span>${item.seriesName}</span>  
                </div>
                <span>${item.value}${that.$t('data.data34')}</span>
              </div>
              
            </div>
            `;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.unitNames,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: this.unitTypey,
      }, true);
    },
    // 初始化 柱状图
    initCharts4() {
      const myChart4 = document.getElementById('myChart4');
      if (!myChart4) return;
      // if (myChart4.hasAttribute('_echarts_instance_')) {
      //   myChart4.removeAttribute('_echarts_instance_');
      // }
      const myChart_4 = echarts.init(myChart4);
      // 绘制图表
      myChart_4.setOption({
        color: ['#1e9970', '#1ab0e0', '#003e67'],
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.doctor4x,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: [
          {
            name: this.$t('add.add159'),
            barWidth: 30,
            type: 'bar',

            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#1d986f',
            },
            data: this.doctor4y,
          },
          {
            name: this.$t('add.add161'),
            barWidth: 30,
            type: 'bar',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#17bcef',
            },
            data: [180, 189, 280, 250, 90, 10, 320],
          },
          {
            name: this.$t('add.add160'),
            barWidth: 30,
            type: 'bar',

            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#003e66',
            },
            data: [154, 189, 250, 210, 250, 90, 300],
          },
        ],
      }, true);
    },
    // 初始化 曲线图
    initCharts5() {

      let that = this;
      const myChart5 = document.getElementById('myChart5');

      if (!myChart5) return;
      // if (myChart5.hasAttribute('_echarts_instance_')) {
      //   myChart5.removeAttribute('_echarts_instance_');
      // }
      const myChart_5 = echarts.init(myChart5);
      // 绘制图表
      myChart_5.setOption({
        color: this.color2,
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
          data: [this.$t('add.add052'), this.$t('add.add053'), this.$t('add.add054')],
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {

            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
              <div style="width: 200px">
                <div style="display: flex;justify-content: space-between;">
                    <span>${params[0].name}</span>
                    <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
                </div>
            `;
            params.forEach((item) => {
              result += `
                  <div style="display: flex;justify-content: space-between;">
                    <div>
                      <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
                      <span>${item.seriesName}</span>  
                    </div>
                    <span>${item.value}${that.$t('data.data34')}</span>
                  </div>
                  
                </div>
              `;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.yishexName,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: this.yishenx,
      }, true);
    },
    // 初始化 饼状图
    initCharts6() {
      const myChart6 = document.getElementById('myChart6');

      if (!myChart6) return;
      // if (myChart6.hasAttribute('_echarts_instance_')) {
      //   myChart6.removeAttribute('_echarts_instance_');
      // }
      const myChart_6 = echarts.init(myChart6);
      // 绘制图表
      myChart_6.setOption({
        color: this.color2,
        backgroundColor: '#fff', // 背景颜色
        title: {
          text: '',
        },

        tooltip: {
          // 显示更多信息
          trigger: 'item',
        },

        series: [
          {
            type: 'pie', // 饼状图
            radius: '50%', // 半径
            // roseType: 'angle', // 玫瑰样式--南丁格尔玫瑰图，突出角度
            // 图形样式
            itemStyle: {
              // 普通样式
              shadowBlur: 10, // 阴影大小
              shadowOffsetX: 0, // 阴影水平方向的偏移
              shadowOffsetY: 0, // 阴影垂直方向的偏移
              shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
            },
            // 高亮样式
            emphasis: {
              itemStyle: {
                shadowBlur: 20, // 阴影大小
                shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
              },
            },

            // 引导线样式
            labelLine: {
              // 引导线普通样式
              lineStyle: {
                color: '#a0afde', // 引导线颜色（红绿蓝,透明度）-白色
              },
            },
            // 具体数据
            data: this.chartsArr,
          },
        ],
      }, true);
    },
    // 初始化 柱状图
    initCharts7() {

      let that = this;
      let myChart7 = document.getElementById('myChart7');

      if (!myChart7) return;
      // if (myChart7.hasAttribute('_echarts_instance_')) {
      //   myChart7.removeAttribute('_echarts_instance_');
      // }
      this.myChart_7 = echarts.init(myChart7);

      // 绘制图表
      this.myChart_7.setOption({
        color: this.color7,
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {

            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
              <div style="width: 200px">
                <div style="display: flex;justify-content: space-between;">
                    <span>${params[0].name}</span>
                    <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
                </div>
            `;
            params.forEach((item) => {
              result += `
                  <div style="display: flex;justify-content: space-between;">
                    <div>
                      <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
                      <span>${item.seriesName}</span>  
                    </div>
                    <span>${item.value}${that.$t('data.data34')}</span>
                  </div>
                  
                </div>
              `;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.placeName7,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: this.placeTypey,
      }, true);
      console.log('121212', this.placeTypey);
    },
    initCharts8() {
      const myChart8 = document.getElementById('myChart8');
      if (!myChart8) return;
      // if (myChart8.hasAttribute('_echarts_instance_')) {
      //   myChart8.removeAttribute('_echarts_instance_');
      // }
      const myChart_8 = echarts.init(myChart8);
      // 绘制图表
      myChart_8.setOption({
        color: ['#1e9970', '#1ab0e0', '#003e67'],
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.skillDept4x,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: [
          {
            name: this.$t('add.add159'),
            barWidth: 30,
            type: 'bar',

            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#1d986f',
            },
            data: this.skillDept4y,
          },
          {
            name: this.$t('add.add161'),
            barWidth: 30,
            type: 'bar',

            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#17bcef',
            },
            data: [180, 189, 280, 250, 90, 10, 320],
          },
          {
            name: this.$t('add.add160'),
            barWidth: 30,
            type: 'bar',

            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [20, 20, 0, 0],
            },
            lineStyle: {
              color: '#003e66',
            },
            data: [154, 189, 250, 210, 250, 90, 300],
          },
        ],
      }, true);
    },
    initCharts10() {
      let that = this;
      const myChart10 = document.getElementById('myChart10');
      if (!myChart10) return;
      const myChart_10 = echarts.init(myChart10);
      // 绘制图表
      myChart_10.setOption({
        color: this.color7,
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {

            let sum = params.reduce((total, obj) => Number(total) + Number(obj.value), 0);
            let result = `
           <div style="width: 200px">
             <div style="display: flex;justify-content: space-between;">
                 <span>${params[0].name}</span>
                 <span>${that.$t('data.data35')}  ${sum}${that.$t('data.data34')}</span>
             </div>
         `;
            params.forEach((item) => {
              result += `
               <div style="display: flex;justify-content: space-between;">
                 <div>
                   <span style="display: inline-block;width: 30px;height: 10px;background:${item.color}"></span>  
                   <span>${item.seriesName}</span>  
                 </div>
                 <span>${item.value}${that.$t('data.data34')}</span>
               </div>
               
             </div>
           `;
            });
            result += '</div>'
            return result;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: this.unitNames,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: this.$t('add.add211'),
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)',
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              color: '#000',
            },
            axisTick: {
              show: false,
              color: 'rgba(151, 151, 151, 1)',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed',
              },
            },
            // splitArea: {
            //     show: true,
            //     areaStyle: {
            //         color: ['#fff', 'rgba(245, 246, 250, 1)']
            //     }
            // }
          },
        ],
        series: this.unitTypey,
      }, true);
    },
    // 点击按钮切换 currentIndex
    columnar(val, type) {
      if (type === 'orderAnalysis') {
        this.orderAnalyType = val;
        this.$nextTick(() => {
          if (val === 0) {
            this.initCharts7();
            this.initCharts2();
          } else if (val === 1) {

            this.initCharts5();


          } else if (val === 2) {
            this.initCharts2();
          } else if (val === 3) {

          }
        });
      } else if (type === 'partners') {
        this.partnersType = val;
        this.$nextTick(() => {
          if (val === 0) {
            this.initCharts3();
          } else if (val === 1) {
            this.initCharts9();
          }
        });
      }


    },
    // 获取子组件索引
    getIndex(index, type) {

      if (type === 'orderAnalysis') {
        // 订单分析
        this.childrenIndex2 = index;
        this.$nextTick(() => {
          if (this.orderAnalyType === 0) {
            this.initCharts2();
            this.initCharts7();

          } else if (this.orderAnalyType === 1) {

            this.initCharts5();


          } else if (this.orderAnalyType === 2) {
            this.initCharts2();
          } else if (this.orderAnalyType === 3) {

          }
        });





      } else if (type === 'partners') {
        // 合作伙伴
        this.partnersIndex = index;
        this.$nextTick(() => {
          if (this.partnersType === 0) {
            this.initCharts3();
            this.initCharts10();
          } else if (this.partnersType === 1) {
            this.initCharts9();
          }
        });

      }


    },

  },
};
</script>

<style lang="scss">
.data-statistics-date-picker {
  .el-picker-panel__shortcut {
    &:nth-child(3) {
      color: #003e67;
    }
  }
}
</style>
<style lang="scss" scoped>
.datastatistics {}

.tag_color_1 {
  color: rgb(31, 152, 114) !important;
}

.tag_color_2 {
  color: rgb(26, 176, 224) !important;
}

.tag_color_3 {
  color: rgb(0, 62, 103) !important;
}



.datastatistics-title {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  opacity: 1;
}

.datastatistics-bg {
  width: 83px;
  height: 30px;
  padding: 0 8px;
  border-radius: 15px;
  background: #003e67;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 30px;
  color: #ffffff;
  opacity: 1;
  margin-left: 3px;
}

.data_order_title {
  margin-bottom: 10px;
}

.el-tabs__active-bar {
  width: 300px !important;
}

.hour_order {
  position: relative;

  .hour_order_info {
    position: absolute;
    right: 26px;
    right: 16px;
  }
}

.data_bottom_innder {
  position: relative;

  .other_order_type {
    position: absolute;
    top: -36px;
    right: 4px;
  }

  .inner-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .list {
      width: 50%;
      margin-top: 20px;
      display: flex;
      align-items: center;

      .name {
        width: 260px;
        display: flex;
        align-items: center;

        .yuan {
          width: 30px;
          height: 30px;
          background: #5587ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-weight: bold;
          margin-right: 6px;
        }
      }
    }

    .list:nth-child(even) {
      padding-left: 50px;
    }
  }
}

.order_info {
  margin-top: 24px;

  ::v-deep .el-card__body {
    overflow: hidden;
  }
}

.data_order_bottom {
  // padding: 10px 100px 70px 100px;

  .order_summary_item {
    margin-top: 50px;

    p:nth-of-type(1) {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
    }

    p:nth-of-type(2) {
      font-size: 30px;
      font-weight: 500;
      color: #333333;
      line-height: 42px;
    }

    span {
      height: 17px;
      font-size: 12px;
      color: #999999;
    }
  }
}

.distributionBox,
.patientAge {
  display: flex;
  align-items: center;

  .legendBox {
    .legend-item {
      margin-bottom: 20px;
      padding-left: 5px;

      >div {
        margin-bottom: 10px;

        .legend-round {
          display: inline-block;
          border-radius: 50%;

          width: 10px;
          height: 10px;
          margin-right: 5px;
        }
      }

      >div:nth-child(2) {
        .legend-value {
          font-size: 20px;
        }

        .legend-proportion {
          color: #afa7a7;
        }
      }
    }
  }
}

::v-deep .el-table thead.is-group th {
  background: none;
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 102px;
  /*这里需要自己调整，根据td的宽度和高度*/
  top: 0;
  left: 0;
  background-color: #bbb;
  opacity: 0.3;
  display: block;
  transform: rotate(-66.5deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 102px;
  /*这里需要自己调整，根据td的宽度和高度*/
  bottom: 0;
  right: 0;
  background-color: #bbb;
  opacity: 0.3;
  display: block;
  transform: rotate(-66.3deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: bottom;
}
</style>
